<template>
    <div class="box">
        <div class="search-box">
            <el-input clearable v-model="keyword" placeholder="请输入要投放的区位信息" style="width: 300px;"></el-input>
        </div>
        <baidu-map :zoom="zoom" :scroll-wheel-zoom="true" :center="{ lng: 119.95665271494673, lat: 31.6676110565705 }"
                   style="width: 100%; height: 100%" @zoomend="handlerZoomend" @ready="handler" @click="getClickInfo"
                   @moving="syncCenterAndZoom" @moveend="syncMoved">
            <!-- 必须给容器指高度，不然地图将显示在一个高度为0的容器中，看不到 -->
            <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> -->
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true"
                            :autoLocation="true"></bm-geolocation>
            <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>

            <!-- <bm-boundary :name="boundaryName" :strokeWeight="2" strokeColor="blue"></bm-boundary> -->

            <bm-circle :editing="false" :center="circlePath.center" :radius="circlePath.radius"
                       :stroke-color="'#39c3f0'" :fillColor="'#add5fe'" :fillOpacity="0.3" :stroke-opacity="0.5"
                       :stroke-weight="1"></bm-circle>
            <template v-for="(item) in busMarkers">
                <bm-marker :position="{ lat: item.latLng[0], lng: item.latLng[1] }" :dragging="false" :key="item.id"
                           :icon="{ url: busIcon, size: { width: 40, height: 50 } }">
                </bm-marker>
            </template>
            <template v-for="(item) in subwayMarkers">
                <bm-marker :position="{ lat: item.lng, lng: item.lat }" :dragging="false" :key="item.id"
                           :icon="{ url: subwayIcon, size: { width: 40, height: 50 } }">
                </bm-marker>
            </template>
            <template v-for="(item) in bikes">
                <bm-marker :position="{ lat: item.lat, lng: item.lng }" :dragging="false" :key="item.id"
                           @click="handleParkInfoWindow(item)"
                           :icon="{ url: bikeParkIcon, size: { width: 40, height: 50 } }">
                </bm-marker>
            </template>
            <bm-local-search :panel="false" :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>

            <bm-polygon :path="polygonPath" :strokeColor="'blue'" :fillColor="'#add5fe'" :fillOpacity="0.2"
                :strokeOpacity="0.5" :strokeWeight="2" />
<!--            <bm-polygon :path="parkRail" :strokeColor="'blue'" :fillColor="'#add5fe'" :fillOpacity="0"-->
<!--                :strokeOpacity="0.5" :strokeWeight="2" />-->
        </baidu-map>
    </div>
</template>

<script>
import API from "@/utils/request"

export default {
    emits: ['calledMoving', 'calledMoved','callShowParkInfo'],
    props: ['busMarkers', 'subwayMarkers', 'bikeMarkers'],
    data() {
        return {
            // 地址信息
            address: null,
            keyword:'',
            location: '常州',
            showParkInfo: false,//是否展示单车停放点信息
            // mapStyle: mapStyle, // 地图样式
            circlePath: {
                radius: '1000',
                center: {lng: 119.95665271494673, lat: 31.6676110565705}
            },
            boundaryName: '常州市武进区',
            //地图展示级别
            zoom: 16,
            // markerPoint: {
            //     lng: 119.96774259612293,
            //     lat: 31.678568035925753
            // },
            busIcon: require("@/assets/img/icon/icon_bus_site.png"),
            subwayIcon: require("@/assets/img/icon/icon_subway.png"),
            bikeParkIcon: require("@/assets/img/icon/icon_bycicle_park.png"),
            polygonPath: [],
            parkRail: [],
            bikes: [],
            bmap: null,
            map: null,
        };
    },
    watch: {
        bikeMarkers(val) {
            this.bikes = []
            this.bikes.push(
                ...val,
                {showInfoWindow: false}
            )
        }
    },
    methods: {
        // eslint-disable-next-line no-unused-vars
        handler({BMap, map}) {
            //地图加载完成回调
            // map.setMapStyleV2({ styleId: '79b9301d31d5aff9483b0b451e43e2a7' });
            map.enableScrollWheelZoom(true);
            // map.centerAndZoom('常州市', 17);
            this.circlePath.center = map.getCenter();
            this.bmap = BMap;
            this.map = map;
            map.clearOverlays();
            API.getWujinBoundary((res) => {
                console.log(res.data.geometry, "res-->>>>");
                // //coordinates
                // var count = res.data.geometry.coordinates[0].length;
                // console.log('5>>>' + count);
                for (var i = 0; i < res.data.geometry.coordinates[0].length; i++) {
                    var point = new BMap.Point(res.data.geometry.coordinates[0][i][0], res.data.geometry.coordinates[0][i][1]);
                    this.polygonPath.push(point);
                }
                // this.polygonPath = ;
                console.log(this.polygonPath, "this.polygonPath-->>>>");
                // if (count === 0) {
                //     alert('未能获取当前输入行政区域');
                //     return;
                // }
                // var pointArray = [];
                // for (var i = 0; i < count; i++) {
                //     var ply = new BMap.Polygon(res.data.geometry.coordinates[0][i], { strokeWeight: 2, strokeColor: "#ff0000" });
                //     map.addOverlay(ply);
                //     pointArray = pointArray.concat(ply.getPath());
                // }

                // console.log('7>>>');
                // map.setViewport(pointArray);
                // console.log('8>>>');

            });
        },

        getClickInfo(e) {
            console.log(e, "e-->>>>");
            // 创建地理编码实例
            // // eslint-disable-next-line no-undef
            // const myGeo = new BMap.Geocoder();
            // // 根据坐标逆解析地址
            // // eslint-disable-next-line no-undef
            // myGeo.getLocation(new BMap.Point(e.point.lng, e.point.lat), (result) => {
            //     console.log(result, "result-->>>>");
            //     if (result) {
            //         this.address = result.address;
            //     }
            // });
            // this.center.lng = e.point.lng;
            // this.center.lat = e.point.lat;
        },
        handlerZoomend(e) {
            this.zoom = e.target.getZoom();
            this.circlePath.center.lng = e.target.getCenter().lng;
            this.circlePath.center.lat = e.target.getCenter().lat;
        },
        syncCenterAndZoom(e) {
            // console.log(e.target, 'e.target-->>>>')
            // const { lng, lat } = e.target.getCenter();
            this.circlePath.center.lng = e.target.getCenter().lng;
            this.circlePath.center.lat = e.target.getCenter().lat;
            this.$emit("calledMoving", e);
        },
        syncMoved(e) {
            this.$emit("calledMoved", e);

        },
        updatePolygonPath(e) {
            this.polygonPath = e.target.getPath();
        },
        //展示单车电子围栏和其他信息
        handleParkInfoWindow(data) {
            //移动地图中心点
            // eslint-disable-next-line no-undef
            this.map.panTo(new BMap.Point(data.lng, data.lat));
            this.$emit('callShowParkInfo', data);
            //设置中心点
            console.log(data, "data-->>>>")
            API.getBikeByParkName({parkName: data.name}, res => {
                if (res.code === 200) {
                    console.log(res.data, ">>>单车信息");
                    this.$emit('callShowParkInfo', data,res.data);
                }
            })
        },
        parkInfoWindowOpen(item) {
            item.showInfoWindow = true;

        },
        parkInfoWindowClosed(item) {
            item.showInfoWindow = false;
        },
    },
};
</script>
<style scoped>
.box {
    width: 100%;
    height: 100%;
    background-color: antiquewhite;
}
.search-box{
    position: absolute;
    top: 10px;
    z-index: 10;
    left: 74%;
    transform: translateX(-50%);
}
</style>